<template>
  <d2-container>
    <template slot="header">
      <h2>{{ $t('page.form.merchantAccount') }}</h2>
      <div class="search-btn-box">
        <div class="left">
          <el-button class="filter-item" type="success" @click="showTransfer" size="mini" :loading="mainTable.loading"> {{ $t('page.form.withdrawdeposit') }}</el-button>
          <el-button class="filter-item" type="primary" @click="showWirhdraw" size="mini" :loading="mainTable.loading">{{ $t('page.form.turnAccount') }}</el-button>
          <el-button class="filter-item" type="primary" @click="showInfo" size="mini" :loading="mainTable.loading">{{ $t('page.form.filling') }}</el-button>
        </div>
        <div class="right"></div>
      </div>
    </template>

    <!--主列表数据-->
    <d2-crud-x ref="d2Crud" :options="mainTable.options" :index-row="mainTable.indexRow" :columns="mainTable.columns" :data="mainTable.list" :selection-row="mainTable.allowSelect" :loading="mainTable.loading" @current-change="onMainCurrentChange" @row-dblclick="onMainDoubleClick"></d2-crud-x>

    <template slot="footer">
      <el-pagination @size-change="handleMainSizeChange" @current-change="handleMainPageChange" :current-page="mainTable.pagination.currentPage" :page-sizes="mainTable.pagination.pageSizes" :page-size="mainTable.pagination.pageSize" :page-count="mainTable.pagination.pageCount" :total="mainTable.pagination.total" layout="total, sizes, prev, pager, next, jumper" :background="true">
      </el-pagination>
    </template>
    <dialog-withdraw ref="dialog-withdraw" @dialog-close="fetchMainData(true)"></dialog-withdraw>
    <dialog-transfer ref="dialog-transfer" @dialog-close="fetchMainData(true)"></dialog-transfer>
    <notice-dialog ref="notice-dialog" @dialog-close="fetchMainData"></notice-dialog>
  </d2-container>
</template>

<script>
import util from "@/libs/util";
import ApiMain from "@/api/mch.account";
import i18nTable from "@/mixins/i18n-table";
import ApiAccountAccessType from "@/api/settle.accountAccessType";
import DialogWithdraw from "./dialog-withdraw.vue";
import DialogTransfer from "./dialog-transfer.vue";
import noticeDialog from "./noticeDialog";
export default {
  mixins: [i18nTable],
  components: {
    DialogTransfer,
    DialogWithdraw,
    noticeDialog
  },
  data() {
    return {
      mainQuery: {
        terNo: "",
      },
      mainQueryRaw: null,
      mainTable: {
        loading: false,
        options: {
          border: true,
          stripe: true,
          highlightCurrentRow: true,
          emptyText: this.$t('page-announcement.d2-crud.empty-data'),
          t: "page-announcement.d2-crud.empty-data",
          size: "mini",
        },
        // indexRow: {
        //   title:this.$t('page.form.serialnumber'),
        //   width: "80",
        //   align:'center'
        // },
        indexRow: null,
        allowSelect: false,
        columns: [
          // 终端号
          {
            title: "商户号",
            t: "page.form.merchantIdentificationNumber",
            key: "mchNo",
            align: "center",
            showOverflowTooltip: true,
          },
          // 核算币种
          {
            title: "结算币种",
            t: "page.form.settlementcurrency",
            key: "settleCurrency",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            title: "可用账户余额",
            t: "page.form.availableAccountBalance",
            key: "totalAccountCashAmount",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            title: "冻结账户余额",
            t: "page.form.frozenAccountBalance",
            key: "totalAccountFrozenAmount",
            align: "center",
            showOverflowTooltip: true,
          },
        ],
        list: [],
        pagination: {
          currentPage: 1,
          pageSize: 50,
          total: 0,
          pageSizes: [50, 100, 200],
        },
        current: null,
      },
      accountInfo: {},
    };
  },
  mounted() {
    this.mainQueryRaw = Object.copy(this.mainQuery);
    this.resetMainData();


  },

  methods: {
    async showInfo() {
      var data = await ApiMain.getInfo();
      this.$refs["notice-dialog"].show(data);
    },
    showTransfer() {
      this.$refs["dialog-withdraw"].show(this.accountInfo);
    },
    showWirhdraw() {
      this.$refs["dialog-transfer"].show(this.accountInfo);
    },
    renderMainData(re) {
      // re.list.forEach((item) => {});
      // this.mainTable.list = re.list;
      // this.mainTable.pagination.total = re.total;
      re.totalAccountFrozenAmount = re.totalAccountFrozenAmount / 100
      re.totalAccountCashAmount = re.totalAccountCashAmount / 100
      this.accountInfo = re
      this.mainTable.list = [re];
      this.mainTable.pagination.total = 1;


    },

    handleMainSizeChange(val) {
      this.mainTable.pagination.pageSize = val;
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData();
    },
    handleMainPageChange(val) {
      this.mainTable.pagination.currentPage = val;
      this.fetchMainData();
    },

    buildMainQuery() {
      var query = {
        page: this.mainTable.pagination.currentPage,
        limit: this.mainTable.pagination.pageSize,
        search: this.mainQuery,
      };

      return query;
    },

    resetMainData() {
      this.mainQuery = Object.copy(this.mainQueryRaw);
      this.fetchMainData();
    },



    async fetchMainData(isLoad = false) {
      this.mainTable.loading = true;

      if (isLoad) {
        setTimeout(async res => {
          try {
            var re = await ApiMain.list(this.buildMainQuery());
            this.renderMainData(re);
          } catch (err) { }
          this.mainTable.loading = false;
        }, 2500)
      } else {
        try {
          var re = await ApiMain.list(this.buildMainQuery());
          this.renderMainData(re);
        } catch (err) { }

        this.mainTable.loading = false;
      }


    },

    onMainCurrentChange(now, old) {
      this.mainTable.current = now;
    },

    onMainDoubleClick(now) {
      this.mainTable.current = now;
      this.handleAction();
    },

    handleAction() { },
  },
};
</script>

<style>
</style>
